<template>
    <div class="com_box flexbox flexcolumn height_100" v-loading="loading" element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0)">
        <AdverRank />
        <div class="time_head flexbox flexcenter flexbetween">
            <div class="flexbox flexcenter">
                <el-popover placement="bottom-start" width="380" v-model="is_model">
                    <div slot="reference" class="select_box flexbox flexcenter flexbetween">
                        <div class="flexbox flexcenter">
                            <img src="@/assets/img/model_icon.svg" alt="" class="select_icon">
                            <span class="select_text">{{ modelCheck.name }}</span>
                        </div>
                        <span class="el-icon-caret-bottom"></span>
                    </div>
                    <div class="time_model">
                        <span class="tm_title font_16 color_01">模板</span>
                        <div class="yusuan_list">
                            <div class="yusuan_item flexbox flexcenter flexbetween" @click="changeModel(item, index)"
                                :class="{'active':item.id==queryInfo.template_id}" v-for="(item, index) in modelList"
                                :key="index">
                                <img src="@/assets/img/market_checked.svg" alt="" class="ys_check">
                                <div class="font_14 color_01">{{ item.name }}</div>
                            </div>
                        </div>
                    </div>
                </el-popover>

                <el-select v-model="queryInfo.template_advertiser_id" @change="changeUser" placeholder="账户"
                    style="margin-left:10px;width:285px" class="user_select">
                    <div slot="prefix" class="select_pre flexbox flexcenter">
                        <img src="@/assets/img/account_icon.svg" alt="">
                    </div>
                    <el-option label="全部" value="0" v-if="modelCheck.advertiser"></el-option>
                    <el-option :label="item.advertiser_name" :value="item.template_advertiser_id"
                        v-for="(item, index) in modelCheck.advertiser" :key="index"></el-option>
                </el-select>
            </div>
            <el-button size="small" type="primary" @click="toPlan">
                <div class="flexbox flexcenter flexjust">
                    <svg width="16" height="16" viewBox="0 0 16 16" stroke='#fff' class="btn_svg" fill="none"
                        xmlns="http://www.w3.org/2000/svg">
                        <path
                            d="M8 14.6C11.6451 14.6 14.6 11.6451 14.6 8C14.6 4.35492 11.6451 1.4 8 1.4C4.35492 1.4 1.4 4.35492 1.4 8C1.4 11.6451 4.35492 14.6 8 14.6Z"
                            stroke="inherit" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                        <path d="M12.1999 12.2003L11.2999 11.3003" stroke="inherit" stroke-width="1.2"
                            stroke-linecap="round" stroke-linejoin="round" />
                        <path d="M3.79993 3.80029L4.69993 4.70029" stroke="inherit" stroke-width="1.2"
                            stroke-linecap="round" stroke-linejoin="round" />
                        <path
                            d="M7.14287 9.20015H5.25713M5 10.1001L5.25713 9.20015L5 10.1001ZM7.4 10.1001L7.14287 9.20015L7.4 10.1001ZM7.14287 9.20015L6.2 5.90015L5.25713 9.20015H7.14287Z"
                            stroke="inherit" stroke-linecap="round" stroke-linejoin="round" />
                        <path
                            d="M11.3001 8.00015C11.3001 9.50015 10.2256 10.1001 8.90015 10.1001V5.90015C10.2256 5.90015 11.3001 6.50015 11.3001 8.00015Z"
                            stroke="inherit" stroke-linecap="round" stroke-linejoin="round" />
                    </svg>
                    广告
                </div>
            </el-button>
        </div>
        <div class="pd_20">
            <div class="flexbox flexcenter time_rank flexbetween">
                <div class="has_check flexbox flexcenter flexbetween" v-if="users.length > 0">
                    <div class="has_ch_left">
                        <span class="has_text">已选中{{ users.length }}项</span>
                        <span class="has_btn" @click="batchEnablePlan('ENABLE')">开启</span>
                        <span class="has_btn" @click="batchDisablePlan('DISABLE')">关停</span>
                    </div>
                    <div class="close_check" @click="closeCheck">
                        <img src="@/assets/img/close_check.svg" alt="">
                    </div>
                </div>
                <template v-else>
                    <div class="flexbox flexcenter">
                        <span class="font_14 color_01" style="margin-right:10px">时间粒度：</span>
                        <el-radio-group v-model="queryInfo.during" size="small" @change="getDataList(1)">
                            <el-radio-button label="5">5分钟</el-radio-button>
                            <el-radio-button label="10">10分钟</el-radio-button>
                            <el-radio-button label="30">30分钟</el-radio-button>
                            <el-radio-button label="60">60分钟</el-radio-button>
                        </el-radio-group>
                    </div>
                    <div class="flexbox flexcenter">
                        <el-input placeholder="输入广告组名称" size="small" style="width:216px;margin-right:16px" clearable
                            @change="getDataList(1)" prefix-icon="el-icon-search" v-model="queryInfo.query">
                        </el-input>
                        <el-button plain size="small" @click="adverRank()" :class="{ 'has_rank': rankShow() == true }">
                            <div class="flexbox flexcenter flexjust">
                                <svg  width="16" height="16" viewBox="0 0 16 16" stroke="#616C85" fill="none"
                                    xmlns="http://www.w3.org/2000/svg" class="stroke_svg btn_svg">
                                    <path
                                        d="M3.02806 3C2.61096 3 2.37722 3.48061 2.63474 3.80871L6.69332 8.97963C6.76243 9.06769 6.8 9.1764 6.8 9.28834V13.4085C6.8 13.5924 6.90096 13.7615 7.06286 13.8487L8.46286 14.6029C8.79598 14.7823 9.2 14.5411 9.2 14.1627V9.28834C9.2 9.1764 9.23757 9.06769 9.30668 8.97963L13.3653 3.80871C13.6228 3.48061 13.389 3 12.9719 3H3.02806Z"
                                        stroke="inherit" stroke-width="1.2" stroke-linejoin="round" />
                                </svg>
                                广告筛选
                            </div>
                        </el-button>
                        <el-button size="small" @click="resetForm()" class="el-button-width" v-if="rankShow()">重 置
                        </el-button>
                    </div>
                </template>
            </div>
        </div>
        <div class="flex over_box table_box">
            <el-table :data="tableData" @sort-change='sortChange' ref="multipleTable" class="com_table" height="100%"
                :row-key="(row) => { return row.id }" @selection-change="handleSelectionChange">
                <div slot="empty" class="flexbox flexcenter flexcolumn flexjust" style="height:300px">
                    <img src="@/assets/img/null_icon.svg" alt="">
                    <div class="font_13 color_03">暂无数据</div>
                </div>
                <!-- <el-table-column type="selection" width="55" align="center" :reserve-selection="true" :selectable='selectEnable'>
                </el-table-column> -->
                <el-table-column prop="segmentation_during" label="时段" min-width="120">
                </el-table-column>
                <el-table-column prop="campaign_name" label="广告组名称" min-width="200">
                </el-table-column>
                <el-table-column prop="campaign_id" label="广告组ID" min-width="180">
                </el-table-column>
                <el-table-column prop="advertiser_name" label="广告主名称" min-width="240">
                </el-table-column>
                <el-table-column prop="stat_cost" label="当前消耗" min-width="150">
                </el-table-column>
                <el-table-column prop="pay_order_amount" label="当前转化销售额" min-width="150">
                </el-table-column>
                <el-table-column prop="pay_order_roi" label="当前ROI" min-width="150" sortable="custom">
                </el-table-column>
                <el-table-column prop="segmentation_cost" label="时段消耗" min-width="150" sortable="custom">
                </el-table-column>
                <el-table-column prop="segmentation_gmv" label="时段转化销售额" min-width="180" sortable="custom">
                </el-table-column>
                <el-table-column prop="segmentation_roi" label="时段ROI" min-width="150" sortable="custom">
                </el-table-column>
            </el-table>
        </div>
        <div class="page_box flexbox flexcenter">
            <el-pagination background layout="total, prev, pager, next,sizes" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" :current-page="queryInfo.page" :page-size="queryInfo.limit"
                :page-sizes="[20, 50, 100, 200]" :total="total">
            </el-pagination>
        </div>

    </div>
</template>

<script>
import AdverRank from './model/AdverRank'
export default {
    name: "",
    data() {
        return {
            loading: false,
            is_model: false,
            modelCheck: {},
            modelList: [],
            users: [],
            activeModel: null,
            queryInfo: {
                template_advertiser_id: "",
                template_id: "",
                during: "5",
                page: 1,
                limit: 20,
                order_field: '',
                order_type: '',
                query: '',
                stat_cost: [],
                pay_order_roi: [],
                segmentation_cost: [],
                segmentation_roi: [],
            },
            total: 0,
            setpage: 1,
            tableData: [],
        };
    },
    created() {
        let moedel_data = JSON.parse(this.$route.query.moedel_data);
        this.modelCheck = moedel_data.modelCheck;
        this.activeModel = moedel_data.activeModel;
        this.queryInfo.template_advertiser_id =
            moedel_data.template_advertiser_id;
        this.queryInfo.template_id = moedel_data.template_id;
        this.getModelList();
        this.getDataList(1);
    },
    methods: {
        //获取列表
        async getDataList(page) {
            this.queryInfo.page = page;
            this.loading = true;
            const { data: res } = await this.$http.post(
                "adminapi/tiktokboard/groupCount",
                this.queryInfo
            );
            if (res.code !== 200) {
                this.loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.loading = false;
                this.tableData = res.data.list;
                this.total = res.data.count;
            }
        },

        //获取模板列表
        async getModelList() {
            const { data: res } = await this.$http.post(
                "adminapi/tiktokboard/templateList"
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.modelList = res.data;
            }
        },

        // 切换模板
        changeModel(item, index) {
            this.is_model = false
            this.activeModel = index;
            this.modelCheck = item;
            this.queryInfo.template_advertiser_id = "0";
            this.queryInfo.template_id = item.id;
            this.getDataList(1);
        },

        // 账户切换
        changeUser() {
            this.getDataList(1);
        },

        // 添加模板
        addTimeModel() {
            const attr = {
                dialogVsb: true,
            };
            this.$bus.emit("addTimeModel", attr);
        },

        // 批量选择
        handleSelectionChange(val) {
            var ids = [];
            val.forEach((element) => {
                ids.push({
                    campaign_id: element.campaign_id,
                    advertiser_id: element.advertiser_id,
                });
            });
            this.users = ids;
        },

        switchPlan(row) {
            let text = row.opt_status == "ENABLE" ? "关闭" : "开启";
            this.$confirm(`请问是否${text}已选中广告`, `${text}广告`, {
                confirmButtonText: "确认",
                cancelButtonText: "取消",
            })
                .then(async () => {
                    this.loading = true;
                    let ads = [
                        {
                            campaign_id: row.campaign_id,
                            advertiser_id: row.advertiser_id,
                        },
                    ];
                    let type =
                        row.opt_status == "ENABLE" ? "DISABLE" : "ENABLE";
                    const { data: res } = await this.$http.post(
                        "adminapi/timeinterval/campaignStatusUpdate",
                        {
                            campaigns: ads,
                            opt_status: type,
                        }
                    );
                    if (res.code !== 200) {
                        this.$message.error(res.msg);
                        this.loading = false
                        return;
                    } else {
                        this.loading = false
                        this.$message({
                            type: "success",
                            message: "操作成功",
                        });
                        this.getDataList(this.setpage);
                    }
                })
                .catch(() => { });
        },

        // 批量开启
        batchEnablePlan(type) {
            this.$confirm("请问是否开启已选中广告", "开启广告", {
                confirmButtonText: "确认",
                cancelButtonText: "取消",
            })
                .then(async () => {
                    this.loading = true;
                    const { data: res } = await this.$http.post(
                        "adminapi/timeinterval/campaignStatusUpdate",
                        {
                            campaigns: this.users,
                            opt_status: type,
                        }
                    );
                    if (res.code !== 200) {
                        this.loading = false
                        this.$message.error(res.msg);
                        return;
                    } else {
                        this.loading = false
                        this.$message({
                            type: "success",
                            message: "开启成功",
                        });
                        this.getDataList(this.setpage);
                    }
                })
                .catch(() => { });
        },

        // 批量开启
        batchDisablePlan(type) {
            this.$confirm("请问是否关闭已选中广告", "关闭广告", {
                confirmButtonText: "确认",
                cancelButtonText: "取消",
            })
                .then(async () => {
                    this.loading = true;
                    const { data: res } = await this.$http.post(
                        "adminapi/timeinterval/campaignStatusUpdate",
                        {
                            campaigns: this.users,
                            opt_status: type,
                        }
                    );
                    if (res.code !== 200) {
                        this.loading = false
                        this.$message.error(res.msg);
                        return;
                    } else {
                        this.loading = false
                        this.$message({
                            type: "success",
                            message: "关闭成功",
                        });
                        this.getDataList(this.setpage);
                    }
                })
                .catch(() => { });
        },

        // 跳转广告计划
        toPlan() {
            let data = {
                modelCheck: this.modelCheck,
                activeModel: this.activeModel,
                template_advertiser_id: this.queryInfo.template_advertiser_id,
                template_id: this.queryInfo.template_id,
            };
            let moedel_data = JSON.stringify(data);
            this.$router.push({
                path: "/tk_advert_plan",
                query: {
                    moedel_data: moedel_data,
                },
            })
        },

        selectEnable(row, rowIndex){
            if (row.campaign_id == 0) {
                return false
            }else{
                return true
            }
        },

        // 关闭批量选择
        closeCheck() {
            this.users = [];
            this.$refs.multipleTable.clearSelection();
        },

        resetForm() {
            this.queryInfo.stat_cost = [];
            this.queryInfo.pay_order_roi = [];
            this.queryInfo.segmentation_cost = [];
            this.queryInfo.segmentation_roi = [];
            this.getDataList(1);
        },

        // 排序
        sortChange(column) {
            this.queryInfo.order_type = "";
            this.queryInfo.order_field = "";
            if (!column.order) {
                this.getDataList(this.setpage);
                return;
            } else {
                var order = column.order.slice(0, -6);
            }
            this.queryInfo.order_type = order;
            this.queryInfo.order_field = column.prop;
            this.getDataList(1);
        },

        // 计划筛选
        adverRank() {
            const attr = {
                dialogVsb: true,
            };
            this.$bus.emit("adverRank", attr);
        },

        rankShow() {
            let isShow =
                this.queryInfo.stat_cost.length > 0 ||
                this.queryInfo.pay_order_roi.length > 0 ||
                this.queryInfo.segmentation_cost.length > 0 ||
                this.queryInfo.segmentation_roi.length > 0
            return isShow
        },

        // 每页显示多少条数据
        handleSizeChange(val) {
            this.queryInfo.limit = val;
            this.getDataList(1);
        },
        // 当前页切换
        handleCurrentChange(val) {
            this.setpage = val;
            this.getDataList(val);
        },
    },
    components: {
        AdverRank
    },
};
</script>


<style scoped>
.time_head {
    height: 80px;
    border-bottom: 1px solid #ebebeb;
    padding: 0 20px;
}

.select_icon {
    margin-right: 10px;
}

.select_box {
    width: 260px;
}

.select_pre {
    height: 100%;
}

.time_title {
    font-size: 16px;
    color: #17233d;
    line-height: 22px;
    padding-left: 10px;
    position: relative;
    font-weight: bold;
}

.time_title::after {
    content: "";
    position: absolute;
    width: 4px;
    height: 12px;
    background-color: #4475ff;
    border-radius: 5px;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.pd_20 {
    padding: 0 20px;
}

.tc_text {
    font-size: 14px;
    color: #616c85;
    margin-top: 8px;
    line-height: 20px;
    height: 20px;
}

.time_rank {
    height: 70px;
}

.table_box {
    padding: 0 20px;
}

.time_model {
    padding: 8px;
}

.yusuan_list {
    margin-top: 0;
    margin-bottom: 20px;
}

.time_tag {
    padding: 0 8px;
    line-height: 21px;
    height: 21px;
    font-size: 12px;
    color: #616c85;
    border-radius: 2px;
    margin-right: 10px;
    background-color: rgba(165, 177, 209, 0.08);
}
</style>

<style>

.el-button.has_rank {
    background: #fff !important;
    border-color: #3d69e6 !important;
    color: #3d69e6 !important;
    outline: 0 !important;
}
.el-button.has_rank svg {
    stroke: #3d69e6 !important;
}
</style>

